<template>
  <div class="home container" @mousedown="mouseDown">
    <h1>todo list</h1>

    <div>共{{ length }}项，已完成项{{ unfinished.length }}</div>

    <div>未完成列表</div>

    <ul>
      <li
        v-for="(item, index) in lists"
        :key="index"
        class="d-flex justify-content-between"
      >
        <div class="form-check" v-if="!item.checked">
          <input
            class="form-check-input"
            type="checkbox"
            v-model="item.checked"
            :id="'un-' + item.name"
            @click="item.checked = !item.checked"
          />

          <label
            class="form-check-label"
            for="defaultCheck2"
            @dblclick="showEdit(item, index)"
            v-if="!item.isEdit"
          >
            {{ item.name }}
          </label>

          <label class="form-check-label" for="defaultCheck2" v-else>
            <!-- ref="myinput" 查看鼠标点击的是不是我们定义的正确的input输入框 -->
            <input type="text" v-model="editVal" ref="myinput" />
          </label>
        </div>

        <button type="button" class="close" aria-label="关闭" @click="remove">
          <span aria-hidden="true">&times;</span>
        </button>
      </li>
    </ul>

    <div>已完成列表</div>

    <ul>
      <li v-for="(item, index) in lists" :key="index">
        <div class="form-check" v-if="item.checked">
          <input
            class="form-check-input"
            type="checkbox"
            :id="'al-' + item.name"
            disabled
          />
          <label class="form-check-label" for="defaultCheck2">
            {{ item.name }}
          </label>
        </div>
      </li>
    </ul>

    <div class="input-group">
      <input
        type="text"
        class="form-control"
        placeholder="Username"
        aria-describedby="basic-addon1"
        v-model="name"
      />
    </div>

    <div class="btn-group" role="group" aria-label="..." @click="add">
      <button type="button" class="btn btn-primary">添加</button>
    </div>
  </div>
</template>

<script>
import { reactive, computed, toRefs, ref } from "vue";

export default {
  name: "Home",
  setup() {
    const myinput = ref(null);
    // 添加
    const add = () => {
      state.lists.push({
        name: state.name,
        checked: false,
        isEdit: false,
      });
      state.name = "";
    };

    // 删除
    const remove = (index) => {
      console.log(index);
      state.lists.splice(index, 1);
    };

    // 编辑
    const showEdit = (item, index) => {
      state.lists[index].isEdit = true;
      state.editVal = item.name;
      state.preIndex = index;
    };

    const mouseDown = (e) => {
      // e.target.contains
      console.log(e, ":::", myinput.value);
      if (myinput.value && e.target !== myinput.value) {
        state.lists[state.preIndex].isEdit = false;
        state.lists[state.preIndex].name = state.editVal;
        state.editVal = "";
      }
    };

    let state = reactive({
      newsVal: "",
      editVal: "",
      preIndex: "", // 把上一个编辑的索引存起来，后面编辑其它的输入框的时候，要把上一个编辑框去掉，并且值设置为新的
      name: "",
      lists: [
        { name: "1", checked: false, isEdit: false },
        { name: "2", checked: false, isEdit: false },
        { name: "3", checked: false, isEdit: false },
      ],
      unfinished: computed(() => state.lists.filter((item) => item.checked)),
      add,
      showEdit,
      mouseDown,
      remove,
      myinput,
    });

    return toRefs(state);
  },
};
</script>
